<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./font/font.css">
</head>

<body>
    <script src="./lib/jquery-1.11.3.js"></script>
    <script src="./lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <div id="back">
        <video id="v1" autoplay muted loop style="width: 100%">
            <source src="./video/背景视频.mp4">
        </video>
        <div id="main">
            <p class="smdl">登录</p>
            <article>
                <div> <span id="yhm" class="iconfont icon-24gl-portraitMaleInfo3"></span><input type="text"
                        placeholder="请输入用户账号" id="yhmk" pattern="/^[a-zA-Z0-9_]\w{3,15}$/" onchange="username()" />
                </div>
                <p id="ts"></p>
                <div>
                    <span id="mima" class="iconfont icon-mima"></span><input type="password" placeholder="请输入登录密码"
                        id="mimak" pattern="/^.{6,}$/" onchange="Password()" />
                </div>
                <p id="mimats"></p>
            </article>
            <p id="loginbtn">登录</p>
            <div id="touristslogin"><a href="./touris_index.html">游客登录 > </a></div>
            <div id="funpassword">
                <p id="querypassword">找回密码 ></p>
            </div>
            <div id="floor"></div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" id="mymodalcolor">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body modalbody">
                        <p><span>请输入账号：</span><input type="text" id="utruename"><label for=""
                                id="lable1">请输入正确的账号</label></p>
                        <!-- <div></div> -->
                        <p><span>请输入手机号：</span><input type="text" id="utruetell"><label for=""
                                id="lable2">请输入正确的手机号</label></p>
                        <!-- <div></div> -->
                        <p><span>请输入验证码：</span><input type="text"><input id="btnSendCode1" type="button"
                                class="btn btn-default" value="获取验证码" onClick="sendMessage1()" /></p>
                        <!-- <div></div> -->
                        <p><span>请输入新的密码：</span><input type="text" id="truepassword"></p>
                        <!-- <div></div> -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="addpassw">提交</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
    // console.log($(window).height());
    $('#back').height($(window).height())
    $('#back').width($(window).width())
    function username() {
        var user = document.getElementById('yhmk').value;
        var re = /^[a-zA-z]\w{3,15}$/;
        if (!re.test(user)) {
            $("#ts").text('提示：请输入正确的用户名');
        }
    }
    function Password() {
        var pass = document.getElementById("mimak").value;
        var re = /^[a-zA-z0-9]\w{5,}$/;
        if (!re.test(pass)) {
            $("#mimats").text('提示：密码至少6位');
        }
    }
    // 登录
    $('#loginbtn').click(() => {
        $.ajax({
            url: '/login',
            data: {
                username: $('#yhmk').val(),
                password: $('#mimak').val()
            },
            success: (res) => {
                console.log(res);
                if (res = '登陆成功') {
                    location.href = './index.html'
                }
            }
        })
    })
    // 找回密码
    window.onchange = function () {
        // console.log(123);
        $('#utruename').blur(() => {
            $.ajax({
                url: '/querpasswoed',
                data: {
                    utruename: $('#utruename').val()
                },
                success: (res) => {
                    console.log(res);
                    if (res == '没有此账户') {
                        $('#lable1').addClass("disblock")
                    } else {
                        $('#lable1').removeClass("disblock")
                    }
                }
            })
        })
        $('#utruetell').blur(() => {
            $.ajax({
                url: '/quertell',
                data: {
                    utruename: $('#utruename').val(),
                    utruetell: $('#utruetell').val()
                },
                success: (res) => {
                    console.log(res);
                    if (res == '没有此账户') {
                        $('#lable2').addClass("disblock")
                    } else {
                        $('#lable2').removeClass("disblock")
                    }
                }
            })
        })
    }

    $('#querypassword').click(() => {
        $('#myModal').modal('toggle')
    })
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1;//当前剩余秒数
    function sendMessage1() {
        //设置button效果，开始计时
        curCount1 = count;
        $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val(+ curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次

    }
    function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode1").removeAttr("disabled");//启用按钮
            $("#btnSendCode1").val("重新发送");
        }
        else if (curCount1 == 55) {
            alert('验证码：6621')
            window.clearInterval(InterValObj1);//停止计时器
        }
        else {
            curCount1--;
            $("#btnSendCode1").val(+ curCount1 + "秒再获取");
        }
    }
    $('#addpassw').click(() => {
        $.ajax({
            url: '/editpassword',
            data: {
                utruename: $('#utruename').val(),
                utruepassword: $('#truepassword').val()
            },
            success: (res) => {
                console.log(res);
                $('#myModal').modal('toggle')
            }
        })
    })

</script>

</html>